<!DOCTYPE html>
<html>
<head>
    <title>Login Test</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="https://unpkg.com/element-plus/dist/index.full.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
</head>
<body>
    <div id="app">
        <h1>Login Test Page</h1>
        <p>This is a test page to check if login component works.</p>
        <el-button type="primary" @click="showLogin = true">Show Login Form</el-button>
        
        <div v-if="showLogin">
            <h2>Login Form</h2>
            <el-form label-position="top">
                <el-form-item label="用户名">
                    <el-input v-model="username" placeholder="请输入用户名"></el-input>
                </el-form-item>
                <el-form-item label="密码">
                    <el-input v-model="password" type="password" placeholder="请输入密码"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="handleLogin">登录</el-button>
                </el-form-item>
            </el-form>
            <p v-if="message">{{ message }}</p>
        </div>
    </div>

    <script>
        const { createApp, ref } = Vue;
        
        createApp({
            setup() {
                const showLogin = ref(false);
                const username = ref('');
                const password = ref('');
                const message = ref('');
                
                const handleLogin = async () => {
                    try {
                        message.value = 'Attempting login...';
                        const response = await fetch('http://127.0.0.1:8001/v1/auth/login', {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json'
                            },
                            body: JSON.stringify({
                                username: username.value,
                                password: password.value
                            })
                        });
                        
                        if (response.ok) {
                            const data = await response.json();
                            localStorage.setItem('authToken', data.token);
                            message.value = 'Login successful!';
                        } else {
                            const error = await response.json();
                            message.value = 'Login failed: ' + error.detail;
                        }
                    } catch (error) {
                        message.value = 'Login error: ' + error.message;
                    }
                };
                
                return {
                    showLogin,
                    username,
                    password,
                    message,
                    handleLogin
                };
            }
        }).use(ElementPlus).mount('#app');
    </script>
</body>
</html>